<template>
  <div class="navWrapper" @click="handleClick">
    <div class="label">{{labelText}}</div>
    <div class="desc">{{descText}}</div>
    <span class="iconfont iconjiantou1 gender"></span>
  </div>
</template>

<script>
export default {
  props: ["labelText", "descText"],
  methods: {
    handleClick() {
      console.log("横条子组件被点击了");
      this.$emit("barClick");
    }
  }
};
</script>

<style lang="less" scoped>
.navWrapper {
  display: flex;
  padding: 4.44vw 6.67vw 4.44vw 0;
  margin-left: 6.67vw;
  border-bottom: 1px solid #e4e4e4;
  .label {
    font-size: 3.89vw;
    color: #333;
  }
  .desc {
    flex: 1;
    text-align: right;
    font-size: 3.33vw;
    color: #bbb;
    padding-right: 1.67vw;
  }
  .gender {
    font-size: 3.89vw;
  }
}
</style>